import * as zrender from 'zrender';

import {
  showArrow,
  arrowSize,
} from '../../config';

import { findReact, findText } from '../../utils';

/**
 * 创建左箭头矩形
 * @param x
 * @param y
 * @param shift 任务
 * @param shiftBarRect 任务栏矩形
 * @param displayArrow 是否显示箭头
 * @param boundingLeft 左边界
 * @param onClickHandler 点击事件处理函数
 */
export function createLeftArrowRect(
  _x: number,
  y: number,
  shift: Shift,
  shiftBarRect: any,
  displayArrow: boolean,
  boundingLeft: number,
  onClickHandler: () => void,
) {
  if (!showArrow) {
    return;
  }
  const baseZ = 1000;
  const group = new zrender.Group({
    x: 0 + 5,
    y: y + (shiftBarRect.height - arrowSize) / 2,
  });
  const text = new zrender.Text({
    x: arrowSize / 2,
    style: {
      text: '←',
      fill: 'rgb(101, 116, 114)',
      fontSize: arrowSize * 0.8,
      align: 'center',
      lineHeight: arrowSize,
    },
    z: baseZ + 1,
    name: 'leftArrowText',
  });
  group.add(text);
  const leftArrowRect = new zrender.Rect({
    shape: {
      width: arrowSize,
      height: arrowSize,
      r: 3,
    },
    style: {
      fill: 'rgba(221, 221, 221, 1)',
    },
    z: baseZ,
    name: 'leftArrowRect',
  });
  group.on('mouseover', () => {
    if (boundingLeft >= shift.start + shift.duration) {
      const rect = findReact(group, 'leftArrowRect');
      rect && rect.attr({
        style: {
          fill: shift.fillColor,
        },
      });
    }
    const text = findText(group, 'leftArrowText');
    text && text.attr({
      style: {
        fill: 'rgb(32, 35, 40)',
      },
    });
  });
  group.on('mouseout', () => {
    const rect = findReact(group, 'leftArrowRect');
    rect && rect.attr({
      style: {
        fill: 'rgba(221, 221, 221, 1)',
      },
    });
    const text = findText(group, 'leftArrowText');
    text && text.attr({
      style: {
        fill: 'rgb(101, 116, 114)',
      },
    });
  });
  group.on('click', onClickHandler);
  group.add(leftArrowRect);
  if (!displayArrow) {
    group.eachChild(child => {
      child.hide();
    });
  }
  return group;
}

/**
 * 创建右箭头矩形
 * @param x
 * @param y
 * @param shift 任务
 * @param shiftBarRect 任务栏矩形
 * @param displayArrow 是否显示箭头
 * @param boundingLeft 左边界
 * @param onClickHandler 点击事件处理函数
 */
export function createRightArrowRect(
  x: number,
  y: number,
  shift: Shift,
  unitWidth: number,
  lastScrollX: number,
  canvasWidth: number,
  shiftBarRect: any,
  displayArrow: boolean,
  boundingRight: number,
  onClickHandler: () => void,
) {
  if (!showArrow) {
    return;
  }
  const baseZ = 1000;
  const group = new zrender.Group({
    x: x + lastScrollX + canvasWidth - arrowSize - 10 - shift.start * unitWidth,
    y: y + (shiftBarRect.height - arrowSize) / 2,
  });
  const text = new zrender.Text({
    x: arrowSize / 2,
    style: {
      text: '→',
      fill: 'rgb(101, 116, 114)',
      fontSize: arrowSize * 0.8,
      align: 'center',
      lineHeight: arrowSize,
    },
    z: baseZ + 1,
    name: 'rightArrowText',
  });
  group.add(text);

  const rightArrowRect = new zrender.Rect({
    shape: {
      width: arrowSize,
      height: arrowSize,
      r: 3,
    },
    style: {
      fill: 'rgba(221, 221, 221, 1)',
    },
    z: baseZ,
    name: 'rightArrowRect',
  });

  // 鼠标移入
  group.on('mouseover', () => {
    const rect = findReact(group, 'rightArrowRect');
    if (boundingRight < shift.start) {
      rect && rect.attr({
        style: {
          fill: shift.fillColor,
        },
      });
    }
    const text = findText(group, 'rightArrowText');
    text && text.attr({
      style: {
        fill: 'rgb(32, 35, 40)',
      },
    });
  });

  // 鼠标移出
  group.on('mouseout', () => {
    const rect = findReact(group, 'rightArrowRect');
    rect && rect.attr({
      style: {
        fill: 'rgba(221, 221, 221, 1)',
      },
    });
    const text = findText(group, 'rightArrowText');
    text && text.attr({
      style: {
        fill: 'rgb(101, 116, 114)',
      },
    });
  });

  group.on('click', onClickHandler);
  group.add(rightArrowRect);
  if (!displayArrow) {
    group.eachChild(child => {
      child.hide();
    });
  }
  return group;
}
